<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link
      rel="stylesheet"
      href="https://unpkg.com/element-plus/dist/index.css"
    />
    <script src="https://unpkg.com/vue@3"></script>
    <script src="https://unpkg.com/element-plus"></script>

    <!-- gcore,fastly -->
    <!-- <link
      rel="stylesheet"
      href="https://gcore.jsdelivr.net/npm/element-plus/dist/index.css"
    />
    <script src="https://gcore.jsdelivr.net/npm/vue@3"></script>
    <script src="https://gcore.jsdelivr.net/npm/element-plus"></script> -->
  </head>
  <body>
    <div id="app">
      <search-bar v-model="searchData" />
    </div>

    <!-- 方法二：直接引入，到是要把文件的的export去掉 -->
    <!-- <script src="./useVModel.js"></script>-->
    <!-- <script> -->
    <!-- 方法一：这样就能import,但是会跨域,下载插件live server打开就行 -->
    <script type="module">
      import { useVModel } from "./useVModel.js";

      const { createApp, ref, defineEmits, computed, defineProps } = Vue;

      // 表单封装，计算属性+proxy解决单项数据流的问题
      const App = {
        setup() {
          const searchData = ref({
            keyword: "",
            placeholder: "请输入你要查询的关键字",
            options: [
              { label: "视频", value: "video" },
              { label: "文章", value: "article" },
              { label: "用户", value: "user" },
            ],
            selectedValue: "video",
          });
          return {
            searchData,
          };
        },
      };

      const SearchBar = {
        props: {
          modelValue: {
            type: Object,
            required: true,
          },
        },
        setup(props, ctx) {
          console.log(props);
          // js文件里取不到computed
          const model = useVModel(computed, props, "modelValue", ctx.emit);
          // const model = computed({
          //   get() {
          //     return new Proxy(props.modelValue, {
          //       set(obj, name, val) {
          //         console.log({
          //           ...obj,
          //           [name]: val,
          //         });
          //         ctx.emit('update:modelValue', {
          //           ...obj,
          //           [name]: val,
          //         });
          //         console.log("通知父组件值改变了");
          //         return true;
          //       },
          //     });
          //   },
          //   set(val) {
          //     ctx.emit('update:modelValue', val);
          //   },
          // });
          return {
            model,
          };
        },
        template: `
        <el-input v-model="model.keyword" :placeholder="model.placeholder">
          <template #prepend>
            <el-select  v-model="model.selectedValue"
              placeholder="Select"
              style="width: 85px"
            >
              <el-option
                v-for="item in model.options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </template>
          <template #append>
            <el-button icon="el-icon-search"/>
          </template>
        </el-input>`,
      };

      const app = createApp(App);
      app.use(ElementPlus);
      app.component("search-bar", SearchBar);
      app.mount("#app");
    </script>
  </body>
</html>
